<template>
    <div class="behavior-wrapper">
        <DataGrid :auto-load="autoLoad" row-key="id" border ref="dataGridRef">
            <template #toolbar-search>
                <div class="query-from-box">
                    <el-form :model="queryData">
                        <el-form-item>
                            <el-input v-model="queryData.actionName" placeholder="行为名称/标识符" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="queryData.actionType" placeholder="行为类型" clearable>
                                <el-option
                                    v-for="(value, key) in thingActionType"
                                    :label="value"
                                    :key="key"
                                    :value="key"
                                />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <template #toolbar-operation>
                <el-button type="primary" @click="operCollect('新建')">新建</el-button>
            </template>
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="displayName" label="行为名称">
                <template #default="{ row }">
                    <el-link type="primary" :underline="false" @click="onViewItem(row)">{{ row.displayName }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="actionName" label="标识符" />
            <el-table-column label="调用方式">
                <template #default="{ row }">
                    {{ thingActionType[row.actionType] }}
                </template>
            </el-table-column>
            <el-table-column label="输入参数">
                <template #default="{ row }">
                    {{
                        tryJsonParse(row.inputParam, [])
                            .map(item => `${item.paramName}-${item.paramId}`)
                            .join('; ')
                    }}
                </template>
            </el-table-column>
            <el-table-column label="输出参数">
                <template #default="{ row }">
                    {{
                        tryJsonParse(row.outputParam, [])
                            .map(item => `${item.paramName}-${item.paramId}`)
                            .join('; ')
                    }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
                <template #default="scope">
                    <el-button link type="primary" @click="operCollect('修改', scope.row)">修改</el-button>
                    <el-button link type="danger" @click="operCollect('删除', scope.row)"> 删除 </el-button>
                </template>
            </el-table-column>
        </DataGrid>
    </div>
</template>
<script setup lang="ts">
import type { SysMetadataObject, SysMetadataThingAction } from '@great/services';
import { modelThingService } from '@great/services';
import { thingActionType } from '@/utils/constant';
import { DataGrid, type DataGridInstance } from '@great/components';
import { showPopupBox, tryJsonParse } from '@great/utils';
import ActionFormModal from './ActionFormModal.vue';

const attributeTypeList = inject<ComputedRef>('AttributeTypeList')!;

const props = defineProps<{
    detailData?: SysMetadataObject;
}>();
// 查询条件
const queryData = ref({
    objectName: props.detailData?.objectName,
    actionType: '',
    actionName: ''
});
const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await modelThingService.getPageAction({
            current,
            size,
            ...queryData.value
        });
        return { data: res.data.records, total: res.data.total };
    }
});

function onViewItem(row: SysMetadataThingAction) {
    showPopupBox(ActionFormModal, {
        readOnly: true,
        detail: row,
        modelDetail: props.detailData!,
        attributeTypeList: attributeTypeList.value
    });
}

/**
 * 操作收集
 * @param type 操作类型
 * @param row 操作行数据
 */
const operCollect = (type: string, row?: SysMetadataThingAction) => {
    switch (type) {
        case '新建':
            showPopupBox(ActionFormModal, {
                modelDetail: props.detailData!,
                attributeTypeList: attributeTypeList.value,
                callback: () => {
                    dataGridRef.value?.refresh();
                }
            });
            break;
        case '修改':
            showPopupBox(ActionFormModal, {
                modelDetail: props.detailData!,
                attributeTypeList: attributeTypeList.value,
                detail: row,
                callback: () => {
                    dataGridRef.value?.refresh();
                }
            });
            break;
        case '删除':
            ElMessageBox.confirm(`是否确认删除行为 ${row?.displayName} ？`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    await modelThingService.delAction(row?.id as number);
                    ElNotification({
                        title: '删除成功！',
                        type: 'success'
                    });
                    dataGridRef.value?.refresh();
                })
                .catch(() => {});
            break;
    }
};
</script>
<style scoped lang="scss">
.behavior-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
}
</style>
